<template>
  <div class="alar-box">
    <el-button
      style="background: #5cfbff; color: #000"
      type="primary"
      @click="openModel(1)"
      >新增报警等级</el-button
    >
    <el-table
      max-height="734"
      :data="tableData"
      style="
        width: 100%;
        margin-top: 12px;
        background-color: #303136;
        color: #ffff;
      "
      :border="false"
    >
      <el-table-column prop="name" label="报警等级"> </el-table-column>
      <el-table-column prop="tips" label="报警提示"> </el-table-column>
      <el-table-column prop="voice" label="报警声音"> </el-table-column>
      <el-table-column prop="color" label="等级颜色">
        <template slot-scope="scope">
          <span
            class="level-color"
            :style="{ 'background-color': scope.row.color }"
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="opration" label="操作">
        <template slot-scope="scope">
          <span class="opration-btn" @click="openModel(2, scope.row)"
            >编辑</span
          >

          <el-popconfirm
            title="确认删除此等级信息吗？"
            @confirm="delWarnLevel(scope.row)"
          >
            <span class="opration-btn" slot="reference">删除</span>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeArr"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <el-dialog
      :modal-append-to-body="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <warn-level-setting
        :levelObj="currentLevelObj"
        @onClose="closeModel"
        v-if="dialogVisible"
        :modeType="modeType"
      ></warn-level-setting>
    </el-dialog>
  </div>
</template>

<script>
import WarnLevelSetting from "./components/alarmLevel/WarnLevelSetting.vue";
import { getWarnList, delWarnLevel } from "@/api/warning";
export default {
  components: {
    WarnLevelSetting,
  },
  data() {
    return {
      tableData: [],
      pageSizeArr: [10, 20, 30, 40, 50, 60],

      pageSize: 20,
      pageNo: 1,
      totalCount: 0,
      dialogTitle: "新增报警等级",
      dialogVisible: false,
      currentLevelObj: {},
      modeType: 0,
    };
  },
  mounted() {
    this.getWarnList();
  },
  methods: {
    closeModel(e) {
      // console.log(e);
      this.dialogVisible = false;
      if (e.isClose) {
        this.pageNo = 1;
        this.tableData = [];
        this.getWarnList();
      }
    },
    //打开等级弹窗
    openModel(type, row = {}) {
      this.dialogVisible = true;
      this.modeType = type;

      if (type == 1) {
        this.dialogTitle = "新增报警等级";
      } else {
        this.dialogTitle = "编辑报警等级";
        this.currentLevelObj = JSON.parse(JSON.stringify(row));
      }
    },
    async getWarnList() {
      let result = await getWarnList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      });

      if (result.code == 200) {
        this.tableData = Array.from(
          new Set([...this.tableData, ...result.data.lists])
        );

        this.totalCount = result.data.count;
      }
    },

    async delWarnLevel(row) {
      let result = await delWarnLevel({ id: row.id });
      if (result.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.pageNo = 1;
        this.tableData = [];
        this.getWarnList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.tableData = [];
      this.getWarnList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.tableData = [];
      this.getWarnList();
    },
  },
};
</script>

<style lang="scss" scoped>
.alar-box {
  text-align: left;
}
.opration-btn {
  display: inline-block;
  width: 52px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  background: #40414d;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}
.level-color {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.table-pagination {
  text-align: right;
  margin: 30px 0;
}
</style>
